<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <a-drawer :visible="visible" unmountOnClose :footer="false" :width="950" @cancel="onCancel" v-if="visible">

    <template #title>列设置</template>

    <!-- <a-space class="mt-3">
      <span>表格大小：</span>
      <a-radio-group type="button" v-model="options.size">
        <a-radio value="mini">迷你</a-radio>
        <a-radio value="small">小</a-radio>
        <a-radio value="medium">中</a-radio>
        <a-radio value="large">大</a-radio>
      </a-radio-group>
      <span class="ml-3">表格边框：</span>
      <a-radio-group type="button" v-model="bordered" @change="changeBordered">
        <a-radio value="hide">不显示外边框</a-radio>
        <a-radio value="show">全部显示</a-radio>
        <a-radio value="row">不显示行</a-radio>
        <a-radio value="column">不显示列</a-radio>
      </a-radio-group>
      <a-checkbox v-model="options.stripe" class="ml-3">斑马纹</a-checkbox>
    </a-space> -->
    <a-alert type="warning" class="mt-2">左侧托拽排序,固定数据最多3条</a-alert>
    <a-table
      :data="allowShowColumns"
      :pagination="false"
      :bordered="{ wrapper: true, cell: false }"
      :draggable="{ type: 'handle', width: 70 }"
      @change="onTableChange"
      @cell-mouse-enter="mouse"
      @cell-mouse-leave="leave"

      stripe
      class="mt-3"
    >
      <template #columns>
        <a-table-column title="列名称" data-index="title" align="center">
          <template #cell="{ record }">{{ record.title }}</template>
        </a-table-column>
<!--        <a-table-column title="宽度" data-index="width" align="center">-->
<!--          <template #cell="{ record }">-->
<!--              <a-input-number-->
<!--                v-if="! ['__index', '__operation'].includes(record.dataIndex)"-->
<!--                style="width: 150px;"-->
<!--                placeholder="列宽度"-->
<!--                v-model="record.width"-->
<!--                mode="button"-->
<!--                @change="changeColumn($event, 'width', record.dataIndex)"-->
<!--              />-->
<!--              <span v-else> / </span>-->
<!--          </template>-->
<!--        </a-table-column>-->
<!--        <a-table-column title="搜索隐藏" data-index="hide" align="center">-->
<!--          <template #cell="{ record }"><a-checkbox v-model="record.search" @change="changeColumn($event, 'search', record.dataIndex)" /></template>-->
<!--        </a-table-column>-->
        <a-table-column title="表格显示" data-index="hide" align="center">
          <template #cell="{ record }"><a-checkbox v-model="record.hide" @change="changeColumn($event, 'hide', record.dataIndex)" /></template>
        </a-table-column>
       <a-table-column title="固定" data-index="fixed" align="center">
         <template #cell="{ record }">
           <a-space v-if="! ['__index', '__operation'].includes(record.dataIndex)">
            <icon-filter style="cursor:pointer" v-show="record.fixed || record.dataIndex==dataIndex" @click="changeColumn($event, 'fixed', record.dataIndex)" />
             <!-- <a-radio v-model="record.fixed" value="" @change="changeColumn($event, 'fixed', record.dataIndex)">无</a-radio>
             <a-radio v-model="record.fixed" value="left" @change="changeColumn($event, 'fixed', record.dataIndex)">左</a-radio>
             <a-radio v-model="record.fixed" value="right" @change="changeColumn($event, 'fixed', record.dataIndex)">右</a-radio> -->
           </a-space>
           <span v-else> / </span>
         </template>
       </a-table-column>
       <!-- <a-table-column title="排序" data-index="order" align="center">
         <template #cell="{ record }">
           <a-space v-if="! ['__index', '__operation'].includes(record.dataIndex)" >
             <a-radio v-model="record.__order" value="" @change="changeColumn($event, 'order', record.dataIndex)">无</a-radio>
             <a-radio v-model="record.__order" value="page" @change="changeColumn($event, 'order', record.dataIndex)">本页</a-radio>
             <a-radio v-model="record.__order" value="serve" @change="changeColumn($event, 'order', record.dataIndex)">服务器</a-radio>
           </a-space>
           <span v-else> / </span>
         </template>
       </a-table-column> -->
      </template>
    </a-table>
  </a-drawer>
</template>

<script setup>
import { ref, inject, getCurrentInstance} from 'vue'
import tool from "@/utils/tool.js";
import {useRoute, useRouter} from "vue-router";
import {instanceFor} from "@/utils/crud/culmns.js";
// const options = inject('options')
// const columns = inject('columns')
const columnsData = inject('columnsData')
const dataIndex=ref('')
const allowShowColumns = ref([])

const emit = defineEmits([ 'onChangeSearchHide', 'onChangeColumnHide' ])

const setShowColumns = () => {
  allowShowColumns.value = columnsData.value.filter(item => {
    return ! (item?.settingHide ?? false)
  })
  console.log('allowShowColumns.value',allowShowColumns.value)
}

const visible = ref(false)
const bordered = ref('column')

const open = () => {
  setShowColumns()
  visible.value = true
}

const onCancel = () => {
  visible.value = false
}
const mouse=(e)=>{
  dataIndex.value=e.dataIndex
}
const leave=(e)=>{
  dataIndex.value=''
}
const changeColumn = (ev, type, name) => {
  const column = columnsData.value.find( item =>  item.dataIndex === name )
  switch (type) {
    case 'order':
      if (ev === 'page') {
        column.sortable = { sortDirections: ['ascend', 'descend'], sorter: false }
      } else if (ev === 'serve') {
        column.sortable = { sortDirections: ['ascend', 'descend'], sorter: true }
      } else {
        column.sortable = undefined
      }
      break
    case 'hide':
      // emit('onChangeColumnHide')
      break
    case 'search':
      emit('onChangeSearchHide')
      break
    case 'fixed':
      let indexNum=null
      let fixedLen=0
      columnsData.value.forEach((item,index) => {
        if(item.dataIndex==name){
          indexNum=index
        }
        if(item.fixed=='left'){
          fixedLen++
        }
      });
      
      if(column.fixed=='left'){
           delete column.fixed
          delete column.fixed
          columnsData.value.splice(indexNum, 1); // 删除元素
          columnsData.value.splice(3,0,column); // 将元素放到第3个
          setShowColumns()
        }else if(fixedLen>2){
           return false
        }else{
          column.fixed='left'
          columnsData.value.splice(indexNum, 1); // 删除元素
          columnsData.value.unshift(column); // 将元素放到数组开头
          setShowColumns()
        }
    // column.sortable = { sortDirections: ['ascend', 'descend'], sorter: false }
    // emit('onChangeSearchHide')
    break
  }
  saveLocalStorage()
}

// const changeBordered = (v) => {
//   if (v === 'hide') {
//     options.bordered = { wrapper: false, cell: false }
//   }
//   if (v === 'show') {
//     options.bordered = { wrapper: true, cell: true }
//   }
//   if (v === 'row') {
//     options.bordered = { wrapper: false, cell: true }
//   }
//   if (v === 'column') {
//     options.bordered = { wrapper: true, cell: false }
//   }
// }
const onTableChange = (_data) => {
  columnsData.value = _data
  setShowColumns()
  saveLocalStorage()
}

//寻找上级
let instance = getCurrentInstance();
let instanceName= instanceFor(instance) || ''
const route = useRoute()
const saveLocalStorage = ()=>{
  const storage = columnsData.value.map(i=>{
    return {
      dataIndex:i.dataIndex,
      hide:i.hide,
      fixed:i.fixed
    }
  })
  tool.local.set(route.path+':'+instanceName,storage);
}

defineExpose({ open })
</script>